<template>
  <transition name="fade">
      <div v-if="isShow" :class="[backgroundColor, $style.search_wrapper]" class="flex align-center  b-block plr10 ptb15">
        <div class=" flex flex-1 align-center " :class="$style.seacrch_input_container">
          <v-icon class="c-mainTheme" name="search"  size="32"></v-icon>
          <input
            @keyup='$_searchForTask'
            v-model = 'content'
            type="text"
            placeholder="search for through keys"
          >
          <v-icon name="close1 " size="28" @click='$clearSearchHistroy' ></v-icon>
        </div>
        <span class="c_white b_FS-28 ml8" @click="hideBar" >取消</span>
        <ul :class='$style.search_result'>
          <template v-if='searchResults.length && isSearchEnd' >
            <li v-for='(task, index) in searchResults' :class='$style.search_li' @click='$selectResult(task)' >
              <p class="b_FS-30">{{ task.title }}</p>
              <p class="c-minorText b_FS-24 ptb10" >{{ task.desc }}</p>
            </li>
          </template>
          <li v-if='isSearchEnd && !searchResults.length ' :class='$style.search_li' >暂无结果</li>
        </ul>
      </div>
  </transition>

</template>

<script type="text/babel">
  export default {
    name: "VSearchBar",
    props: {
      'isShow':{
        type: Boolean ,
        default : false
      },
      'backgroundColor':{
        type: String ,
        default : 'c-mainTheme-bg' // 深蓝
      },
      taskType:{
        type: String,
        default: 'all'
      },

    },
    components: {},
    data() {
      return {
        content : '',
        searchResults : [], // 搜索结果
        isOnsearch: false ,
        timer : null ,
        isSearchEnd : false ,
      }
    },
    created() {
    },
    mounted() {
    },
    beforeDestroy() {
    },
    computed: {},
    methods: {
      hideBar(){
        this.$emit('update:isShow', false)
      },
       $_searchForTask () {
        if( this.isOnsearch ){
          clearTimeout(this.timer)
        }
        else{
          this.isOnsearch = true
        }
        this.timer  = setTimeout(async ()=>{
          this.isSearchEnd = false
          let res = await this.$get('/api/task/search', {
            content: this.content,
            taskType : this.taskType
          })
          this.isOnsearch = false
          if( res.code == 0 ){
            this.searchResults = res.data
            this.isSearchEnd = true
          }
          console.log( res )
        }, 1000)
      },
      $selectResult(item){
        this.$emit('resultSelect', item)
      },
      // 清空搜索框内容
      $clearSearchHistroy(){
        this.content = ''
        this.searchResults = []
      }

    }
  }
</script>

<style module lang='scss'>
  .search_wrapper {
    width: 100vw;
    transform: translateZ(0);
    position: relative;
  }
  .red{
    color: red
  }
  .seacrch_input_container{
    /*width: 50%;*/
    border-radius: 5px;
    padding: 5px;
    border:1px solid white ;
    background-color: #fff;
    input{
      flex : auto;
      /*width:300px ;*/
      font-size: 28px;
      margin-left: 10px;
    }

  }
  .search_result{
    /*width : 666px ;*/
    width: 100% ;
    position: absolute;
    top: 86px;
    left: 0px ;
    background-color: #fff;
    border-radius: 5px;
    border-top: none;
    box-sizing: border-box;
    z-index: 10;
    box-shadow: 0px 5px 10px #e5e5e5;
    /*box-shadow:  0px 2px  10px #41C2FC ;*/
    .search_li {
      display: block;
      font-size: 30px;
      padding: 20px 15px ;
      text-align:left ;
      background-color: white;
      color: black ;
      border-bottom: 1px solid #e5e5e5;

      /*background-color: #41C2FC;*/
    }
    li:last-child{
      border: none;
    }
  }

</style>

<style>
  @-webkit-keyframes fadeInRight {
    from{
      transform: translateY(50%);
      opacity: 0;
    }
    to{
      transform: translateY(0%);
      opacity: .5;
    }
  }

  @-webkit-keyframes fadeOutRight {
    from{
      transform: translateY(0%);
      opacity: .5;
    }
    to{
      transform: translateY(50%);
      opacity: 0;
    }
  }

  .fade-enter-active {
    animation: fadeInRight 0.5s 1 ease-in;
    //transition: opacity .5s;
  }
  .fade-leave-active{
    //transition: opacity .5s;
    animation: fadeOutRight 0.5s 1 ease-out;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateY(100%);
    opacity: 0;
  }

  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }

</style>
